<template>
    <div class="sidebar">
        <div class="sidebar-logo-row">
            <div class="sidebar-logo" v-if="!isCollapse">后台管理</div>
        </div>
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo"
            background-color="var(--bg-color)" text-color="var(--text-color)"
            active-text-color="#4e8cff" router style="border-right: none;"
            :collapse="isCollapse">
            <el-menu-item index="/dashboard">
                <el-icon>
                    <Odometer />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">首页</span>
            </el-menu-item>
            
            <!-- 管理员功能 -->
            <el-menu-item v-if="isAdmin" index="/users">
                <el-icon>
                    <User />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">用户管理</span>
            </el-menu-item>
            <el-menu-item v-if="isAdmin" index="/role">
                <el-icon>
                    <User />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">角色管理</span>
            </el-menu-item>
            <el-menu-item v-if="isAdmin" index="/permission">
                <el-icon>
                    <Setting />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">权限管理</span>
            </el-menu-item>
            <el-menu-item v-if="isAdmin" index="/system">
                <el-icon>
                    <Setting />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">系统管理</span>
            </el-menu-item>
            <el-menu-item v-if="isAdmin" index="/logs">
                <el-icon>
                    <Document />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">系统日志</span>
            </el-menu-item>
            
            <!-- 所有用户都可以看到的功能 -->
            <el-menu-item index="/profile">
                <el-icon>
                    <User />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/help">
                <el-icon>
                    <QuestionFilled />
                </el-icon>
                <span class="menu-text" v-show="!isCollapse">帮助</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup>
// 定义组件名称
defineOptions({
  name: 'MainSidebar'
})

import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
    Odometer,
    User,
    Document,
    Setting,
    QuestionFilled
} from '@element-plus/icons-vue'

const props = defineProps({
    isCollapse: Boolean
})

const route = useRoute()
const activeMenu = computed(() => route.path)

// 检查是否为管理员
const isAdmin = computed(() => {
    try {
        const tokenData = localStorage.getItem('token')
        if (!tokenData) return false
        
        const parsedTokenData = JSON.parse(tokenData)
        const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
        
        // 检查用户角色是否包含管理员相关角色
        if (userInfo && userInfo.roles) {
            const roles = Array.isArray(userInfo.roles) ? userInfo.roles : [userInfo.roles]
            return roles.some(role => 
                role.includes('管理员') || 
                role.includes('admin') || 
                role.includes('Admin')
            )
        }
        
        return false
    } catch (error) {
        console.error('检查管理员权限失败:', error)
        return false
    }
})
</script>

<style scoped>
.sidebar {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-right: none !important;
    transition: width 0.2s;
    width: 100%;
    overflow: hidden !important;
}
.menu-text {
    display: inline-block;
    transition: opacity 0.2s, width 0.2s;
    white-space: nowrap;
    vertical-align: middle;
}
.menu-text[style*="display: none"] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}
.sidebar-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 8px 16px 8px;
}
.sidebar-logo {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    letter-spacing: 2px;
}
.sidebar-footer {
    margin-top: auto;
    padding: 16px 0;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}
/* 暗黑模式适配 */
:deep(.el-menu),
:deep(.el-menu--vertical) {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
:deep(.el-menu-item),
:deep(.el-submenu__title) {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
:deep(.el-menu-item.is-active),
:deep(.el-menu-item:hover),
:deep(.el-submenu__title:hover) {
  background-color: #333 !important;
  color: #fff !important;
}
:deep(.el-menu-item.is-active) {
  border-right: 3px solid #4e8cff !important;
}
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-radius: var(--radius);
}
.dark .sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-radius: var(--radius) !important;
}
.dark .el-menu-item.is-active {
  background: var(--menu-active-bg) !important;
  color: var(--menu-active-text) !important;
  border-radius: var(--radius) !important;
}
.dark .el-menu-item {
  color: var(--sidebar-text) !important;
}
.dark .el-icon {
  color: #8fa7c7 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* 在移动端完全隐藏侧边栏 */
    }
}

@media (max-width: 480px) {
    .sidebar {
        display: none;
    }
}
</style>